<script setup lang="ts">
import { onMounted, ref } from "vue";
import ShoppingCartRemove from "@iconify-icons/mdi/shopping-cart-remove";
import ShoppingCartOutline from "@iconify-icons/mdi/shopping-cart-outline";
import AttachMoney from "@iconify-icons/mdi/attach-money";
import MoneyOff from "@iconify-icons/mdi/money-off";
import DocumentCopy from "@iconify-icons/ep/document-copy";
import AddFill from "@iconify-icons/ep/plus";
import EditPen from "@iconify-icons/ep/edit-pen";
import { useDetail } from "../utils/hook";
import ReCol from "@/components/ReCol";
import { IconifyIconOffline } from "@/components/ReIcon";
/** 表格组件 */
import { PureTableBar } from "@/components/RePureTableBar";

import { useTable, useDunningRecord } from "./utils/hook";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

defineOptions({
  name: "OrderDetail"
});

const { initToDetail, getParameter } = useDetail();
initToDetail("params");

const tableRef = ref();

/** 商品列表数据 */
const {
  formRef,
  loading,
  columns,
  selectedNum,
  orderDetail,
  receiptinfo,
  productinfo,
  orderStatus,
  totalprice,
  purchaseCosts,
  deliverCost,
  copyOrderInfo,
  getOrderData,
  onbatchEdit,
  onSelectionCancel,
  handleSelectionChange
} = useTable(getParameter.id, tableRef);

/** 催款记录数据 */
const { dunningColumns, dunningDataList, openDialog } = useDunningRecord(
  getParameter.id
);
</script>

<template>
  <div class="">
    <!-- 订单编号 订单状态 -->
    <el-row justify="space-between" :gutter="10">
      <re-col :value="24" :md="11" :xl="11" :lg="11" :sl="11">
        <!-- 订单状态 -->
        <el-card>
          <template #header>
            <span class="font-semibold">订单状态</span>
          </template>

          <el-steps
            :active="orderStatus"
            finish-status="finish"
            process-status="finish"
            class="compact-steps"
          >
            <el-step title="未发货">
              <template #icon>
                <IconifyIconOffline :icon="ShoppingCartRemove" width="24" />
              </template>
            </el-step>
            <el-step title="已发货">
              <template #icon>
                <IconifyIconOffline :icon="ShoppingCartOutline" width="24" />
              </template>
            </el-step>
            <el-step title="未回款">
              <template #icon>
                <IconifyIconOffline :icon="MoneyOff" width="24" />
              </template>
            </el-step>
            <el-step title="已回款">
              <template #icon>
                <IconifyIconOffline :icon="AttachMoney" width="24" />
              </template>
            </el-step>
          </el-steps>
        </el-card>
        <el-card> 当前物流信息: {{ orderDetail.logisticsinfo }} </el-card>
      </re-col>

      <!-- 订单信息 -->
      <re-col :value="24" :md="13" :xl="13" :lg="13" :sl="13">
        <el-card>
          <template #header>
            <div class="flex justify-between items-center">
              <div>
                <span class="font-semibold">订单信息</span>
                <span class="text-sm ml-4" style="color: #5e5e5e">{{
                  getParameter.id
                }}</span>
              </div>
              <el-button type="primary" size="small" @click="copyOrderInfo">
                <IconifyIconOffline :icon="DocumentCopy" class="mr-1" />
                复制信息
              </el-button>
            </div>
          </template>
          <el-row>
            <re-col
              :value="12"
              :md="12"
              :xl="12"
              :lg="12"
              :sl="12"
              class="mb-2"
            >
              <div class="info-block">
                <div>单位名称：</div>
                <span>{{ orderDetail.purchasingunit }}</span>
              </div>
              <div class="info-block">
                <div>课题组名称：</div>
                <span>{{ orderDetail.departmentname }}</span>
              </div>
              <div class="info-block">
                <div>联系人姓名：</div>
                <span>{{ orderDetail.contactsname }}</span>
              </div>
              <div class="info-block">
                <div>联系人电话：</div>
                <span>{{ orderDetail.contactsphone }}</span>
              </div>
            </re-col>
            <re-col :value="12" :md="12" :lg="12" :sl="12" class="mb-2">
              <div class="info-block">
                <div>订单日期：</div>
                <span>{{ orderDetail.orderdate }}</span>
              </div>
              <div class="info-block">
                <div>收货人姓名：</div>
                <span>{{ receiptinfo.receivername }}</span>
              </div>
              <div class="info-block">
                <div>收货人电话：</div>
                <span>{{ receiptinfo.receiverphone }}</span>
              </div>
              <div class="info-block">
                <div>收货地址：</div>
                <span>{{ receiptinfo.address }}</span>
              </div>
            </re-col>
          </el-row>
        </el-card>
      </re-col>
    </el-row>

    <!-- 订单详情 -->
    <PureTableBar
      title="订单详情"
      :columns="columns"
      class="mt-0"
      @refresh="getOrderData(getParameter.id)"
    >
      <template v-slot="{ size, dynamicColumns }">
        <!-- 批量操作【默认隐藏】 -->
        <div
          v-if="selectedNum > 0"
          v-motion-fade
          class="bg-[var(--el-fill-color-light)] w-full h-[46px] mb-2 pl-4 flex items-center"
        >
          <!-- 多选数量提示 -->
          <div class="flex-auto">
            <span
              style="font-size: var(--el-font-size-base)"
              class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]"
            >
              已选 {{ selectedNum }} 项
            </span>
            <!-- @click="" -->
            <el-button type="primary" text @click="onSelectionCancel">
              取消选择
            </el-button>
          </div>
          <el-button type="danger" text class="mr-1" @click="onbatchEdit('')">
            设置快递信息
          </el-button>
        </div>
        <!-- 表格区域 -->
        <!-- 值合并方法 :span-method="objectSpanMethod" -->
        <pure-table
          ref="tableRef"
          max-height="240"
          adaptive
          row-key="fgoodsid"
          align-whole="center"
          table-layout="auto"
          :columns="dynamicColumns"
          :data="productinfo"
          :loading="loading"
          :size="size"
          @selection-change="handleSelectionChange"
        />
        <div class="amount-summary">
          <div class="amount-item">
            <span class="amount-label">订单总金额：</span>
            <span class="amount-value">{{ totalprice }}</span>
          </div>
          <div class="amount-item">
            <span class="amount-label">采购价:</span>
            <span class="amount-value">{{ purchaseCosts }}</span>
          </div>
          <div class="amount-item">
            <span class="amount-label">运费:</span>
            <span class="amount-value">{{ deliverCost }}</span>
          </div>
        </div>
      </template>
    </PureTableBar>

    <!-- 催款记录表格 -->
    <PureTableBar title="催款记录" class="mt-0" :columns="dunningColumns">
      <template #buttons>
        <el-button
          type="primary"
          size="small"
          :icon="useRenderIcon(AddFill)"
          @click="openDialog('新增', '')"
        >
          添加记录
        </el-button>
      </template>

      <template v-slot="{ size, dynamicColumns }">
        <!-- 表格区域 -->
        <pure-table
          row-key="id"
          :columns="dynamicColumns"
          :data="dunningDataList"
          :loading="loading"
        >
          <template #operation="{ row }">
            <el-button
              class="reset-margin"
              link
              type="primary"
              :size="size"
              :icon="useRenderIcon(EditPen)"
              @click="openDialog('编辑', row)"
            >
              修改
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
  </div>
</template>

<style lang="scss" scoped>
.info-block {
  padding-bottom: 4px;
  display: flex;
  font-size: 16px;

  div {
    min-width: 100px;
    color: #969696;
  }

  span {
    font-weight: 400;
  }
}

.amount-summary {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #ebeef5;

  .amount-item {
    display: flex;
    align-items: center;
    margin-left: 24px;

    .amount-label {
      color: #606266;
      font-weight: 500;
      margin-right: 8px;
    }

    .amount-value {
      color: #409eff;
      font-weight: 600;
      font-size: 16px;
    }
  }
}
</style>
